<template>
 <view class="index">
    <!-- 1 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 2 轮播图 -->
    <u-swiper
      :list="swiperList"
      name="image_src"
      :height="340"
    ></u-swiper>
	<!-- 3 导航模块 内置样式  -->
	<view class="nav u-flex">
		<navigator 
		 v-for="item in navList"
        :key="item.name"
        class="u-flex-1 u-p-20 "
		>
			<u-image 
			width="100%"
			mode=widthFix
			:src="item.image_src"
			></u-image>
		</navigator>
	</view>
	<!-- 4 楼层 -->
	<view class="floor">
		<!-- 楼层小块 -->
		<view
		class="floor-group"
		v-for="item1 in floorList"
		:key="item1.floor_title.name"
		>
		<!-- 标题 -->
		<view class="floor-group-title">
			<u-image
			width="100%"
			mode="widthFix"
			:src="item1.floor_title.image_src"
			></u-image>
		</view>
		<!-- 内容 -->
		<view class="floor-group-content">
			<navigator
			v-for="item2 in item1.product_list"
			:key="item2.name"
			>
			<u-image width="100%"
			mode="widthFix"
			:src="item2.image_src"
			></u-image>
			</navigator>
		</view>
		</view>
	</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图数组
      			swiperList: [],
				// 导航数组
      			navList: [],
				// 楼层数组
				floorList: [],
			}
		},
		onLoad() {
			this.getSwiper();
			this.getNavs();
			this.getFloors();
		},
		methods: {
			// 获取轮播
			async getSwiper(){
				const result = await this.$u.get("/home/swiperdata");
    			this.swiperList = result.message;
			},
			// 获取导航数据
			async getNavs(){
				const result = await this.$u.get("/home/catitems");
				// console.log(result);
    			this.navList = result.message;
			},
			// 获取楼层数据
			async getFloors() {
				const result = await this.$u.get("/home/floordata");
				console.log(result);
				this.floorList = result.message;
			},
		}
	}
</script>

<style lang="scss">
.floor-group-content {
  navigator {
    width: 232rpx;
    float: left;
    height: 188rpx;
    margin-left: 15rpx;
  }
  navigator:nth-child(1) {
    height: 386rpx;
  }
  /* 后两个导航标签 */
  navigator:nth-last-child(-n + 2) {
    margin-top: 15rpx;
  }
}
</style>
